<template>
	<view class="daBox">
		<view class="box">
			<image class="pointer" src="../../static/zhen.png"></image>
			<view class="pointerTow">
				<image :class="!isHot?'changpian':''" :src="singleList.picUrl"></image>
			</view>
			<view class="switch" @click="switchOf">
				<image v-show="isHot" src="../../static/播放.png" mode="widthFix"></image>
				<image v-show="!isHot" src="../../static/暂停.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="lyric">
			<bing-lyric :lyrics="lyrics" :centerStyle="centerStyle" :curTime="curTime" :areaStyle="cuAreaStyle"
				:lyricStyle="lyricStyle" @centerBtnClick="centerBtnClick" @copyLyrics="copy">
			</bing-lyric>
		</view>


		<view class="shareOne">
			<image src="../../static/分享.png" mode=""></image>分享给微信好友
		</view>



		<view class="resemblance">
			<text class="subtitle">
				<text>喜欢这首歌的人也听</text>
				<text class="subtitleR">/一键收听</text>
			</text>
			<view class="sharePlayList" v-for="(item,index) in resemblance" :key="item.id" @click="single"
				:data-id="item.id">
				<view class="singerNameBox">
					<image class="songId" :src="item.album.blurPicUrl" mode=""></image>
					<text class="songName">{{item.name}} </text>
					<view class="singerName">
						{{item.artists[0].name}}
					</view>
				</view>
				<view>
					<image src="../../static/播放.png" mode=""></image>
				</view>
			</view>
			<view class="comment">
				<text class="subtitle">精彩评论</text>
				<view class="discuss">
					<!-- {{item.content.user.nickname}} -->
					<view class="userObj" v-for="(item,index) in userList">
						<view><image :src="item.avatarUrl" mode="widthFix"></image></view>
						<view class="userObj_two">
							<text>{{item.nickname}}
							{{commentsList[index].timeStr}}
							
							{{commentsList[index].content}}</text>
						</view>
					</view>

					<!-- <image :src="item.beReplied[0].user.avatarUrl" mode=""></image> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getSingleDetails,
		getLyric,
		getSongUrl,
		getResemblanceSong,
		getComment
	} from "../../ajax/ajax.js";
	import bingLyric from "../../components/bing-lyric/bing-lyric.vue"
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				singleList: {},
				text: "",
				tolast: "",
				songUrl: '',
				isHot: true,
				lyrics: [],
				lyricStyle: {},
				centerStyle: {
					btnImg: '../../static/btn.png',
				},
				cuAreaStyle: {
					width: '100vw',
				},
				curTime: 0,
				resemblance: [],
				commentsList: [],
				userList: []
			}
		},
		components: {
			bingLyric
		},
		onLoad(option) {
			if (localStorage.getItem('id') == option.id) {
				if (innerAudioContext.paused) {
					this.isHot = true
				} else {
					this.isHot = false
				}
			} else {
				innerAudioContext.pause()
			}
			localStorage.setItem('id', option.id)
			getSingleDetails({
				ids: option.id
			}).then(res => {
				// console.log(res);
				this.singleList = res.songs[0].al
				uni.setNavigationBarTitle({
					title: res.songs[0].name
				})
			})
			getLyric({
				id: option.id
			}).then(res => {
				// console.log(res.lrc.lyric);
				this.lyrics = res.lrc.lyric.split('\n')
			})
			getSongUrl({
				id: option.id
			}).then(res => {
				// console.log(res.data[0]);
				this.songUrl = res.data[0].url
				// bgAudioManager.src=res.data[0].url
			})
			getResemblanceSong({
				id: option.id
			}).then(res => {
				// console.log(res.songs[0].album.blurPicUrl);
				this.resemblance = res.songs
			})
			getComment({
				id: option.id
			}).then(res => {
				console.log(res.comments);
				this.commentsList = res.comments
				res.comments.forEach((item, i) => {
					// console.log(item.user)
					this.userList.push(item.user)
				})
			})
		},
		methods: {
			single(e) {
				console.log(e.currentTarget.dataset.id);
				const id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: "/pages/single/single?id=" + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			switchOf() {
				if (innerAudioContext.paused) {
					this.isHot = false
					innerAudioContext.autoplay = true;
					innerAudioContext.src = this.songUrl;
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
						this.player = stop;
						this.makeTime()
					})
					getLyric({
						id: localStorage.getItem('id')
					}).then(res => {
						// console.log(res.lrc.lyric);
						this.text = res.lrc.lyric
					})
				} else {
					console.log('暂停');
					this.isHot = true
					innerAudioContext.pause()
				}
			},
			copy(e) {
				console.log('index', e)
				uni.showModal({
					content: JSON.stringify(e.lyrics)
				})
			},
			centerBtnClick(e) {
				console.log(e)
				this.curTime = e.centerTime
			},
			makeTime() {
				let i = 0
				for (i; i < 500; i++) {
					setTimeout(this.out, i * 500, 0.5)
				}
			},
			out(t) {
				this.curTime += t
			}
		},
	}
</script>

<style>
	.userObj{
		padding: 10rpx 0;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		/* align-items: center; */
	}
	.userObj_two{
		margin-left: 20rpx;
	}
	.userObj image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.subtitle {
		display: flex;
		display: inline-block;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 600;
		margin: 40rpx 0;
	}

	.daBox {
		/* height: 93.3vh; */
		background-color: rgba(102, 102, 102, .7);
	}

	.shareOne {
		padding: 10rpx 0;
		width: 280rpx;
		background-color: rgba(102, 102, 102, .3);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx auto;
		border-radius: 25rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.resemblance {
		padding: 10rpx 20rpx;
	}

	.singerName {
		font-size: 20rpx;
		position: absolute;
		top: 40rpx;
		left: 100rpx;
		color: #ddd;
	}

	.songName {
		display: inline-block;
		margin: 0 0 40rpx 20rpx;
		width: 550rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sharePlayList .songId {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
	}

	.singerNameBox {
		color: #fff;
		position: relative;
	}

	.sharePlayList {
		padding: 10rpx 0;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-between;
	}

	.sharePlayList image {
		width: 30rpx;
		height: 30rpx;
	}

	.shareOne image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.box {
		/* background-color: rgba(102, 102, 102, .7); */
		/* background-color: #007AFF; */
		position: relative;
	}

	.lyric {
		width: 750rpx;
		height: 280rpx;
		/* overflow: hidden; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.switch {
		width: 80rpx;
		height: 80rpx;
		transform: translateX(-50%);
		position: absolute;
		top: 440rpx;
		left: 50%;
	}

	.switch image {
		width: 80rpx;
		height: 80rpx;
	}

	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	.changpian {
		animation: turn 5s linear infinite;
	}

	.pointerTow image {
		width: 350rpx;
		height: 350rpx;
		border-radius: 50%;
		border: 40px solid #000;
		margin: 230rpx 0 0 120rpx;
	}

	.pointer {
		z-index: 99;
		width: 180rpx;
		height: 450rpx;
		margin: 0 0 0 350rpx;
		transform: rotate(-30deg);
		position: absolute;
	}
</style>
